<template>
  <div class="placeholder-node"
       :class="{
          'node-enter': isNodeEnter
       }"
       @drop="handleDrop"
       @dragleave="handleDragLeave"
       @dragenter="handleDragEnter">
    从左侧面板拖动节点至此处以替换
  </div>
</template>

<script setup>
import validateStencilDrop from "@/views/workTable/nodes/validateStencilDrop";
import {useReplaceNode} from "../compositions/useReplaceNode.js";

const getGraph = inject('getGraph')
const getNode = inject('getNode')
const graph = getGraph && getGraph()
const placeholderNode = getNode && getNode()

const isNodeEnter = ref(false)

const handleDragEnter = (e) => {
  // console.log('dragenter', e)
  isNodeEnter.value = true
}

const handleDragLeave = (e) => {
  // console.log('dragleave', e)
  isNodeEnter.value = false
}

const handleDrop = (e) => {
  e.preventDefault() // 允许drop
  e.stopPropagation() // 防止graph container 接收到drop事件

  const transferData = JSON.parse(e.dataTransfer.getData('Text') || '') || {}

  if (!validateStencilDrop(transferData, graph)) {
    isNodeEnter.value = false
    return
  }

  const transferNode = graph.addNode({
    shape: transferData.key,
    data: {
      ...transferData.data,
      dialogOpenWay: 'create',
    },
    label: transferData.label,
    iconSrc: transferData.iconSrc,
    x: placeholderNode.getPosition().x,
    y: placeholderNode.getPosition().y,
  })

  useReplaceNode({
    placeholderNode,
    transferNode,
    graph,
  })

  console.log('placeholderNode => replace node')
  graph.workTable.openNodeDrawer(transferNode)
}
</script>

<style scoped lang="scss">
.placeholder-node {
  width: 80px;
  height: 95px;
  border: dashed red 1px;
  background: lightcoral;
  color: white;
  padding: 10px;
  box-sizing: border-box;
  font-size: 12px;
  transition: all linear 100ms;
}

.node-enter {
  background: white;
  color: green;
  border: solid 1px green;
}
</style>
